// 电影头部tabbar

.movie-top {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    width: 750rpx;
    height: 88rpx;
    background-color: #33363D;
    color: #DFDFDF;
    padding: 0 40rpx;

    .city {
        opacity: 0.78;
        font-family: PingFangSC-Regular;
        font-size: 28rpx;

    }

    .tabbar-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 328rpx;
        height: 50rpx;
        border: 2rpx solid black;
        border-image: linear-gradient(to right, #F19E65, #F2697F) 2;
        border-radius: 12rpx;
        clip-path: inset(0 0 round 12rpx);

        .tab-item {
            flex: 1;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: PingFangSC-Medium;
            font-size: 28rpx;
            color: #969393;

            &.active {
                background: linear-gradient(to right, #F19E65, #F2697F);
                color: #ffffff;
            }
        }


    }

    .search {}
}

// 正在热映 电影列表
.movie-list {
    margin-top: 128rpx;
    margin-left: 40rpx;

    .item {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        width: 670rpx;
        height: 292rpx;
        background: #33363D;
        box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.04);
        border-radius: 12rpx;
        margin-top: 40rpx;

        .left {
            position: relative;
            width: 210rpx;
            height: 312rpx;

            .img {
                width: 100%;
                height: 100%;
                border-radius: 12rpx;
            }

            .play {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 76rpx;
                height: 76rpx;
            }
        }

        .right {
            flex: 1;
            position: relative;
            display: flex;
            flex-direction: column;
            height: 100%;
            margin-left: 20rpx;

            .title {
                margin-top: 24rpx;
                font-family: PingFangSC-Medium;
                font-size: 32rpx;
                color: #FFFFFF;
                height: 45rpx;
            }

            .rating {
                font-family: PingFangSC-Regular;
                font-size: 28rpx;
                color: #FFFFFF;
                height: 42rpx;

                .rating-average {
                    font-family: PingFangSC-Medium;
                    font-size: 30rpx;
                    color: #FBC34A;
                    // line-height: 40px;
                }
            }

            .worker {
                width: 253rpx;
                height: 33rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                opacity: 0.47;
                font-family: PingFangSC-Regular;
                font-size: 24rpx;
                color: #FFFFFF;
            }

            .tag {
                display: flex;
                justify-content: flex-start;
                margin-top: 27rpx;

                .tag-item {
                    width: 96rpx;
                    // height: 34rpx;
                    text-align: center;
                    line-height: 34rpx;
                    font-size: 18rpx;
                    border: 2rpx solid #FBC34A;
                    color: #FBC34A;
                    margin-right: 5rpx;
                    border-radius: 10rpx;

                    &:last-child {
                        border-color: #F26C7E;
                        color: #F26C7E;
                    }
                }
            }

            // 购票
            .buy-ticket,
            .pre-sale {
                position: absolute;
                top: 50%;
                right: 20rpx;
                transform: translateY(-50%);
                width: 108rpx;
                height: 50rpx;
                background-image: linear-gradient(150deg, #F25B86 0%, #F1AC5E 100%);
                box-shadow: 0 0 8rpx 2rpx rgba(242, 109, 125, 0.18);
                border-radius: 12rpx;
                font-family: PingFangSC-Medium;
                font-size: 24rpx;
                color: #FFFFFF;
                text-align: center;
                line-height: 50rpx;
            }

            // 预售
            .pre-sale {
                background-image: linear-gradient(150deg, #624BA3 0%, #CB4498 100%);
                box-shadow: 0 0 8rpx 2rpx rgba(242, 109, 125, 0.18);
            }
        }
    }
}

// 即将上映
.coming-container {
    margin-top: 128rpx;
    margin-left: 40rpx;

    .coming-title {
        font-family: PingFangSC-Medium;
        font-size: 36rpx;
        color: #DFDFDF;

        &:last-of-type {
            margin: 40rpx 0;
        }
    }

    .swiper {
        height: 370rpx;
        margin-top: 16rpx;

        .swiper-item {

            >.item {
                position: relative;
                width: 636rpx;
                height: 100%;

                .img {
                    width: 100%;
                    height: 100%;
                    border-radius: 10rpx;
                }

                .play {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 76rpx;
                    height: 76rpx;
                    transform: translate(-50%, -50%);
                }

                .info {
                    position: absolute;
                    bottom: 20rpx;
                    left: 18rpx;
                    right: 20rpx;
                    display: flex;
                    justify-content: space-between;

                    .name,
                    .long-time {
                        font-family: PingFangSC-Regular;
                        font-size: 28rpx;
                        color: #DFDFDF;
                    }

                }
            }
        }
    }

    // 即将上映日期
    .comming-date-swiper {
        height: 60rpx;
        margin: 40rpx 0;

        &-item {
            &-date {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 164rpx;
                height: 52rpx;
                box-sizing: border-box;
                border: 4rpx solid #979797;
                border-radius: 26rpx;
                font-family: PingFangSC-Regular;
                font-size: 28rpx;
                color: #969393;

                &.active {
                    background-image: linear-gradient(150deg, #F25B86 0%, #F1AC5E 100%);
                    box-shadow: 0 0 20rpx 0 rgba(242, 109, 125, 0.40);
                    border-radius: 26rpx;
                    border: none;
                    color: #ffffff;
                }
            }
        }
    }
}

//  列表
.pre-list {
   
    margin-left: 40rpx;
    &-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 670rpx;
        height: 280rpx;
        background: #33363D;
        border-radius: 12rpx;
        margin-bottom: 48rpx;
        &-left {
            position: relative;
            width: 234rpx;
            height: 100%;
            .pre {
                width: 100%;
                height: 100%;
                border-top-left-radius: 12rpx;
                border-bottom-left-radius: 12rpx;
            }
            .play{
                position: absolute;
                top: 50%;
                left: 50%;
                width: 76rpx;
                height: 76rpx;
                transform: translate(-50%,-50%);
            }
        }
        &-right{
            position: relative;
            flex: 1;
            display: flex;
            flex-direction: column;
            margin-left: 20rpx;
            .title{
                font-family: PingFangSC-Medium;
                font-size: 36rpx;
                color: #FFFFFF;
                margin-bottom: 20rpx;
            }
            .rating{
                font-family: PingFangSC-Regular;
                font-size: 28rpx;
                color: #ffffff;
                line-height: 42rpx;
                margin-bottom: 20rpx;
                .rating-average{
                    font-family: PingFangSC-Medium;
                    font-size: 30rpx;
                    color: #FBC34A;
                }
            }
            .worker{
                opacity: 0.47;
                font-family: PingFangSC-Regular;
                font-size: 24rpx;
                color: #FFFFFF;
                width: 436rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .pre-sale{
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 20rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                background-image: linear-gradient(150deg, #624BA3 0%, #CB4498 100%);
                box-shadow: 0 0 8rpx 2rpx rgba(242,109,125,0.18);
                border-radius: 12rpx;
                color: #ffffff;
                width: 108rpx;
                height: 50rpx;
                font-size: 24rpx;

            }
        }
    }
}